<span aria-labelledby="default-rating" class="rating {{cssClass}}">
  <span class="slider" (mouseleave)="reset()" tabindex="0" role="slider"
        [attr.aria-valuemin]="0" [attr.aria-valuemax]="ratingRanges.length" [attr.aria-valuenow]="statValue"
        [attr.aria-valuetext]="statValue">

   <ng-container *ngFor="let item of ratingRanges">
      <span class="sr-only">({{statValue >= item? "*": ""}} )</span>
      <i (mouseenter)="enter(item)" (click)="rate(item)"
         class="{{ statValue < item ? icons.stateOff: icons.stateOn}}"
         [attr.title]="item">
      </i>
   </ng-container>
 </span>
</span>
